<table class="table table-striped table-condensed table-hover table-bordered full-width file-list">

  <colgroup>
    <col style="width: 14em">
    <col>
    <col style="width: 225px">
  </colgroup>

  <thead>
    <tr>
      <th>Timestamp</th>
      <th>File</th>
      <th>Message</th>
    </tr>
  </thead>

  <tbody ng-if="controller.inProgress">
    <tr class="timeline-refresh-indicator">
      <td colspan="3">
        <i class="fa fa-spinner fa-spin fa-3x margin-bottom"></i>
        <div>Creating timeline...</div>
      </td>
    </tr>
  </tbody>

  <!-- We need this ng-if to make sure timelineItems is stable when ApiMemoryItemsProvider is called. -->
  <tbody ng-if="controller.timelineItems && !controller.inProgress">
    <tr grr-infinite-table
        filter-value='filterValue'
        trigger-update="controller.triggerUpdate"
        grr-memory-items-provider
        items="controller.timelineItems"
        ng-class="{'row-selected': item === controller.selectedItem}"
        ng-click="controller.selectFile(item)">
      <td><grr-semantic-value value="::item.value.timestamp" /></td>
      <td><grr-semantic-value value="::item.value.file_path" /></td>
      <td>
        <div ng-if="item.value.action.value === 'MODIFICATION'"><pre class='inline'>M--</pre> File modified.</div>
        <div ng-if="item.value.action.value === 'ACCESS'"><pre class='inline'>-A-</pre> File access.</div>
        <div ng-if="item.value.action.value === 'METADATA_CHANGED'"><pre class='inline'>--C</pre> File metadata changed.</div>
      </td>
    </tr>
  </tbody>

</table>
